<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导入 axios 进行请求</title>
    <!--引入Vue组件-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <!--引入Axios组件，用来发送异步http请求的-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>

<div id="app">
    <button @click="getData()"> 异步请求数据</button>
</div>

<script>
    new Vue({
        el:"#app",
        data:{

        },
        methods:{
            getData(){
                //通过 axios 来获取 data.json 中的数据
                /*
                *   axios  对象   导入axios.min.js  可以直接使用
                *       get  请求的方法 参数是: 请求的地址 这里是data.json
                *       then()   请求成功的返回的结果
                *                响应协议中的数据封装到了 resp中、我们需要的数据是data中的数据
                * */
                axios.get('data.json').then(resp=>{
                    console.log(resp)
                    //获取响应中的数据
                    console.log(resp.data)
                })
            }
        }
    })
</script>

</body>
</html>